<template>

    <p style="color: red;">通知方式</p>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="dI_TypeName" label="字典类型名称12345" width="180" />
        <el-table-column prop="name" label="字典显示名称" width="180" />
        <el-table-column prop="value" label="字典值内容" />
        <el-table-column prop="desc" label="备注信息" />
        <el-table-column type="index" label="排序" />
        <el-table-column type="createUser" label="编辑者" />
        <el-table-column prop="time" label="编辑时间">
            <template v-slot="scoped">
                {{ scoped.row.time.substring(0, 10) }}
            </template>
        </el-table-column>
    </el-table>

    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="Data.pageIndex" v-model:page-size="Data.pageSize" :total="Data.count"
            :page-sizes="[2, 3, 4, 5]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            prev-text="上一页" next-text="下一页" />
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref, watch } from 'vue'

const tableData = ref([])
const Data = ref({
    pageIndex: 1,
    pageSize: 2,
    name: '',
    desc: '',
    count: 0
})

const Show = () => {
    axios.get("http://localhost:5097/api/Management/GetItem", {
        params: {
            pageIndex: Data.value.pageIndex,
            pageSize: Data.value.pageSize,
        }
    })
        .then(res => {
            tableData.value = res.data.pageData;
            Data.value.count = res.data.totalCount;
        })
}

watch(() => (Data.value.pageIndex, Data.value.pageSize), () => {
    Show();
}, { deep: true })


onMounted(() => {
    Show();
})
</script>